<template>
  <div>
    <div id="main">
      <el-row style="margin-top:20px;">
        <el-col span="6" offset="1">
          <el-form :model="params" status-icon :rules="rules" ref="params">
            <el-form-item prop="oldPassword">
              <el-input @keyup.enter.native="submitForm('params')" placeholder="确认密码" type="password"
                        v-model="params.oldPassword" autocomplete="on" clearable>
                <template slot="prepend">账号密码</template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input @keyup.enter.native="submitForm('params')" placeholder="确认密码" type="password"
                        v-model="params.password" autocomplete="on" clearable>
                <template slot="prepend">新&nbsp;&nbsp;密&nbsp;&nbsp;码</template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password2">
              <el-input @keyup.enter.native="submitForm('ruleForm')" placeholder="确认密码" type="password"
                        v-model="params.password2" autocomplete="on" clearable>
                <template slot="prepend">确认密码</template>
              </el-input>
            </el-form-item>
            <el-form-item style="text-align:center">
              <el-button type="primary"  style="min-width:50%" @click="submitForm('params')">确 认 修 改
              </el-button>
              <el-button class="el-icon-refresh c-f" type="text" @click="restClick()" size="mini">
                申请重置
              </el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <el-dialog :id="target" :close-on-click-modal="closeonclickmodal" width="600px" :title="this.dialoginfo.title"
               @close="dialoginfo.show = 0" :visible="dialoginfo.show==1">
      <el-form class="transparent" :model="resetParams" status-icon :rules="rules2" ref="resetParams">
        <el-form-item prop="reason">
          <el-input @keyup.enter.native="submitReset('resetParams')" placeholder="确认密码" type="text"
                    v-model="resetParams.reason" autocomplete="on" clearable>
            <template slot="prepend">重置原因</template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input @keyup.enter.native="submitReset('resetParams')" placeholder="确认密码" type="password"
                    v-model="resetParams.password" autocomplete="on" clearable>
            <template slot="prepend">新&nbsp;&nbsp;密&nbsp;&nbsp;码</template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password2">
          <el-input @keyup.enter.native="submitReset('resetParams')" placeholder="确认密码" type="password"
                    v-model="resetParams.password2" autocomplete="on" clearable>
            <template slot="prepend">确认密码</template>
          </el-input>
        </el-form-item>
        <el-form-item style="text-align:center">
          <el-button type="primary"  style="min-width:50%" @click="submitReset('resetParams')">申 请 重 置
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: "memberPwd",
    components: {
    },
    data() {
      return {
        target:"resetPwd",
        visible: false,
        slide_h:document.body.offsetHeight - 196,
        dialoginfo: {
          show:0,
          title:'',
          url:'',
          data:''
        },
        closeonclickmodal:true,
        params:{
          oldPassword: '',
          password: '',
          password2: '',
        },
        resetParams:{
          reason:'',
          password:'',
          password2: '',
        },
        rules: {
          password: [{
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }],
          password2: [{
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }],
          oldPassword: [{
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }],
        },
        rules2: {
          reason: [{
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }],
          password2: [{
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }],
          oldPassword: [{
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }],
        }
      }
    },
    methods: {
      submitForm(formName ) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.params.password == '' || this.params.password != this.params.password2) {
              this.proUtil.msgWaring('两次输入的密码不一致');
              return;
            }
            var m = {
              oldPassword: this.proUtil.md5(this.proUtil.md5(this.params.oldPassword)),
              password: this.proUtil.md5(this.proUtil.md5(this.params.password)),
            };
            this.proAPI.postJson(this.proAPI.URLS.modifyMemberPwd, m).then((res) => {
              this.proUtil.msgSuccess(res.message);
            })
          }
        })
      },
      restClick(){
        this.dialoginfo = {
          title:"重置登陆密码申请",
          url:this.proAPI.URLS.resetMemberPwd,
          show:1,
          data:""
        }
      },
      submitReset(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.resetParams.password == '' || this.resetParams.password != this.resetParams.password2) {
              this.proUtil.msgWaring('两次输入的密码不一致');
              return;
            }
            var m = {
              reason: this.resetParams.reason,
              password: this.proUtil.md5(this.proUtil.md5(this.resetParams.password)),
            }
            this.$store.commit("saveLoadingMap", {
              "target": this.dialoginfo.url,
              lock: 1
            });
            this.proAPI.postJson(this.dialoginfo.url, m).then((res) => {
              this.proUtil.msgSuccess(res.message);
              setTimeout(() => {
                this.dialoginfo= {
                  show:0,
                  title:'',
                  url:'',
                  data:''
                }
              }, 1000)
            })
          } else {
            return false;
          }
        });
      }
    },
    beforeCreate: function () {
    },
    created: function () {
    },
    beforeMount: function () {
    },
    mounted: function () {
      setTimeout(() => {
        this.visible = true;
      }, 200)
    },
    beforeUpdate: function () {
    },
    updated: function () {
    },
    activated: function () {
    },
    deactivated: function () {
    },
    beforeDestroy: function () {
    },
    destroyed: function () {
    },
    errorCaptured: function (err, vm, info) {
    }
  }
</script>
<style scoped lang="scss">
  #main{
    /deep/ .el-input-group__append{
      background-color: #409EFF;
      border-color:#409EFF;
      color:#ffffff
    }
    /deep/ .el-input-group__prepend{
      background-color: #409EFF;
      border-color:#409EFF;
      color:#ffffff
    }
  }
</style>
